<!-- 通知 -->
<script lang="ts" setup>
defineOptions({ name: 'Notice' });
</script>

<template>
  <div bg="#fff" flex="~ col" p="x-30px t-24px b-12px" of="hidden">
    <div flex="~ justify-between" text="#303133 20px" font="bold" pb="12px">
      <span>通知</span>
      <div>
        <el-button un-size="32px!">
          <el-icon class="i-material-symbols:chevron-left-rounded" />
        </el-button>
        <el-button un-size="32px!">
          <el-icon class="i-material-symbols:chevron-right-rounded" />
        </el-button>
      </div>
    </div>
    <el-scrollbar h="350px!" m="x--12px">
      <div
        v-for="item in 40"
        :key="item"
        p="y-10px x-20px"
        shadow="[0px_1px_2px_0px_rgba(167,167,167,0.5)]"
        rd="4px"
        m="x-12px t-12px"
      >
        <div pb="4px" text="#3B445B1 17px" font="bold">您有一条新的隐患风险预警，请及时处理</div>
        <div flex="~ justify-between items-center" text="#9FB3C6!">
          <span text="15px">2022.02.02 15:20</span>
          <el-icon class="i-custom:right" />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
